<template>
  <el-dialog :visible.sync="dialogVisible" title="实例" width="900px" @close="onClose">
    <!--    <div>-->
    <!--      <el-button type="primary" size="mini" style="float: right">新增实例</el-button>-->
    <!--    </div>-->
    <div>
      <el-table :data="instances" highlight-current-row size="mini" style="width: 900px">
        <el-table-column label="实例名" prop="name" width="200"/>
        <el-table-column label="健康状态" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.hostStatus" :type="(scope.row.hostStatus.code=='UP')?'success':'danger'"
                    effect="dark" size="mini"
            >{{ scope.row.hostStatus.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="服务状态" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.serviceStatus"
                    :type="(scope.row.serviceStatus.code=='UP')?'success':'danger'"
                    effect="dark" size="mini"
            >{{ scope.row.serviceStatus.name }}
            </el-tag>
          </template>

        </el-table-column>
        <el-table-column label="部署进度" width="200">
          <template slot-scope="scope">
            <DeployProgress
                :progress="scope.row.deployingProgress"
                :statusCode="scope.row.deployStatus.code"
                :statusName="scope.row.deployStatus.name"
                :taskName="scope.row.deployingTaskName"
            />
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
        >
          <template slot-scope="scope">
            <el-button :disabled="scope.row.deployStatus.code=='DEPLOYING'||deployGroup.deployStatus.code!='DEPLOYING'"
                       size="mini" type="primary"
                       @click="onDeploy(scope.row.id)">
              发布
            </el-button>
            <el-button :disabled="scope.row.deployStatus.code=='DEPLOYING'" size="mini" type="success"
                       @click="onRestart(scope.row.id)">重启
            </el-button>
            <el-button size="mini" type="info" @click="$parent.$refs.instanceLog.openLog(scope.row.id)">日志</el-button>
            <el-dropdown style="margin-left: 10px" @command="handleCommand">
              <el-button size="mini" type="primary">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{name:'openRecord',rowId:scope.row.id}">操作记录</el-dropdown-item>
                <el-dropdown-item :command="{name:'logFileList',rowId:scope.row.id}">日志文件</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script>
import {deployByInstanceApi, deployStatusListApi, restartByInstanceApi} from "@/api/deploy";
import DeployProgress from "./DeployProgress"

export default {
  data() {
    return {
      dialogVisible: false,
      deployGroup: {},
      instances: [],
      timer: null,
    };
  },
  components: {DeployProgress},
  methods: {
    handleCommand(command) {
      if (command.name == 'openRecord') {
        this.$parent.$refs.instanceRecord.openRecord(command.rowId);
      } else if (command.name == 'logFileList') {
        this.$parent.$refs.instanceLogFile.open(command.rowId);
      }
    },
    open(deployGroup, instances) {
      this.deployGroup = deployGroup;
      this.instances = instances;
      this.dialogVisible = true;
      this.loadDeployStatus();
      const that = this;
      this.timer = setInterval(() => that.loadDeployStatus(), 2000);
    },
    onClose() {
      clearInterval(this.timer);
    },
    onDeploy(instanceId) {
      deployByInstanceApi(instanceId).then(() => {
        this.$message({message: `提交发布成功`, type: "success",});
        this.loadDeployStatus();
      });
    },
    onRestart(instanceId) {
      restartByInstanceApi(instanceId).then(() => {
        this.$message({message: `提交重启成功`, type: "success",});
        this.loadDeployStatus();
      });
    },
    async loadDeployStatus() {
      let deployStatus = await deployStatusListApi(
          this.deployGroup.appName,
          this.deployGroup.name
      );
      deployStatus.forEach((insStatus) => {
        this.instances.forEach((ins) => {
          if (ins.id == insStatus.instanceId) {
            ins.deployStatus = insStatus.deployStatus;
            ins.deployingTaskName = insStatus.deployingTaskName;
            ins.deployingProgress = insStatus.deployingProgress;
            ins.hostStatus = insStatus.hostStatus;
            ins.serviceStatus = insStatus.serviceStatus;
          }
        });
      });
    },
  },
  async created() {
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>
<style scoped>


</style>
